import React, { useEffect } from 'react'
import styled from "styled-components";
import NavBarAgain from '../components/NavBarAgain';
import NewsItem from '../components/NewsItem';
import { connect } from 'react-redux';
import actions from '../store/action';
import SkeletonAgain from '../components/SkeletonAgain';
import { SwipeAction, Toast } from 'antd-mobile';
import { storeRemove } from "../api";

function Store(props) {

    let { store: { list: storeList }, queryStoreListAsync, removeStoreListById } = props;
    console.log(storeList)

    useEffect(() => {
        if (!storeList) {
            queryStoreListAsync()
        }
    }, [])

    const handleRemove = (id) => {
        return (async () => {
            let { code } = await storeRemove(id);
            if (code !== 0) {
                Toast.show({
                    icon: 'fail',
                    content: '移除失败'
                });
                return;
            }
            Toast.show({
                icon: 'success',
                content: '移除成功'
            });
            removeStoreListById(id);
        })
    }


    return (
        <StoreBox>
            <NavBarAgain title="我的收藏"></NavBarAgain>
            {storeList ?
                <div className="box">
                    {storeList.map(item => {
                        return <SwipeAction
                            key={item.id}
                            rightActions={[{
                                key: 'delete',
                                text: '删除',
                                color: 'danger',
                                onClick: handleRemove(item.id)
                            }]}
                        >
                            <NewsItem news={item.news}></NewsItem>
                        </SwipeAction>
                    })}</div> : <SkeletonAgain />}

        </StoreBox>

    )
}

export default connect(
    state => ({ store: state.store }),
    actions.store
)(Store)

const StoreBox = styled.div`
.box {
    padding:30px;
}
`
